<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src="./js/vue2.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <!-- <input type="text" v-model="username"> -->
        <input type="text" v-model="person.name">
        <p>你输入的名字：{{title}}</p>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        let vm = new Vue({
            el: '#app',
            data: {
                message: '你好',
                username: '',
                title: '',
                person: {
                    name: '',
                    age: ''
                }
            },
            methods: {},
            watch: {
                //如果是面单的情况下，我们可以直揽使用监听函
                username(newValue, oldValue) {
                    console.log(newValue, oldValue);
                    this.title = `Mr ${newValue}`
                },
                //深度监听
                person: {
                    immediate: true, // 该回调将会在侦听开始之后被立即调用
                    deep: true,// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
                    handler: function (newValue) {
                        this.title = `Mr ${newValue.name}`
                    }
                }
            }
        })
    </script>
</body>

</html>